<template>
  <div>
    <el-card class="category" style="margin: 20px 0;">
		<el-form :inline="true" class="demo-form-inline" :model="list">
			<el-form-item label="一级分类">
				<el-select 
          placeholder="请选择"
          v-model="list.category1Id"
          @change="order1"
          :disabled="show"
        >
					<el-option
            :label="c1.name"
            :value="c1.id"
            v-for="(c1,index) in list1"
            :key="c1.id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="二级分类">
				<el-select 
          placeholder="请选择"
          v-model="list.category2Id"
          @change="order2"
          :disabled="show"
          >
					<el-option
          :label="c2.name"
            :value="c2.id"
            v-for="(c2,index) in list2"
            :key="c2.id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="三级分类">
				<el-select 
          placeholder="请选择"
          v-model="list.category3Id"
          @change="order3"
          :disabled="show"
        >
					<el-option
          :label="c3.name"
            :value="c3.id"
            v-for="(c3,index) in list3"
            :key="c3.id"
					/>
				</el-select>
			</el-form-item>
		</el-form>
	</el-card>
  </div>
</template>

<script>
import {reqCategory1List,reqCategory2List,reqCategory3List,reqAttrList,reqAddUpdateAttr} from '@/api/attr'
export default {
  name: "CategorySelector",
  props:["show"],
  data() {
    return {
      //一级分类 数据
      list1:[],
      list2:[],
      list3:[],
      //收集各级分类id
      list:{
        category1Id:"",
        category2Id:"",
        category3Id:"",
      }
    }
  },
  mounted() {
    this.getCategory1List()
  },
  methods: {
    //获取1级分类列表数据
    async getCategory1List(){
      const res = await reqCategory1List()
      this.list1 = res.data
      // console.log(res);
    },
    //获取1级分类后获取对应的2级分类数据
    async order1(){
      this.list2 = []
      this.list3 = []
      this.list.category2Id = ''
      this.list.category3Id = ''
      //解构list1 id
      const {category1Id} = this.list
      this.$emit("getCategoryId",{categoryId: category1Id, level: 1})
      //获取二级分类id，数据
      const res = await reqCategory2List(category1Id)
      this.list2 = res.data
    },
    //获取2级分类后获取对应的3级分类数据
    async order2(){
      this.list3 = []
      this.list.category3Id = ''
      //解构list2id
      const {category2Id} = this.list
      this.$emit("getCategoryId",{categoryId: category2Id, level: 2})
      //获取三级分类id，数据
      const res = await reqCategory3List(category2Id)
      this.list3 = res.data
    },
    //三级分类回调
    order3(){
      //解构获取三级分类id
      const {category3Id} = this.list
      this.$emit("getCategoryId",{categoryId: category3Id, level: 3})
    }
  },
};
</script>


<style scoped></style>